<template>
	<view class="container">
		<view class="container-c">
			<view class="item" v-for="item in addressList" :key="item.id">
				<view class="left" @tap="chooseItem(item)">
					<view class="name">
						{{item.name}}
					</view>
					<view class="phone">
						{{item.phoneNumber}}
					</view>
				</view>
				<view class="right">
					<image @tap="editAddress(item.id)" src="../../../static/icons/edit.png" mode=""></image>
				</view>
			</view>
			<view @tap="addAddress" class="add">
				新增地址
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllAddress,
		delAddressInfo
	} from "@/api/list/address/index.js"
	export default {
		data() {
			return {
				addressList: [],
				id: ''
			};
		},

		onLoad(e) {
			this.id = e.id
			findAllAddress().then(res => {
				console.log(res)
				this.addressList = res.data.items;
			})
		},
		methods: {
			addAddress() {
				uni.navigateTo({
					url: "/pages/list/address/addAddress/addAddress"
				})
			},
			editAddress(id) {
				uni.navigateTo({
					url: "/pages/list/address/editAddress/editAddress?id=" + id
				})
			},
			chooseItem(item) {
				var obj = {
					addressId: item.id,
					name: item.name,
					phone: item.phoneNumber,
					province: item.province,
					city: item.city,
					region: item.region,
					detailAddress: item.detailAddress
				}
				uni.setStorageSync("obj", obj)
				var id = item.id;
				uni.navigateTo({
					url: "/pages/list/order/order?id=" + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		height: 100vh;
	}

	.container-c {
		width: 650rpx;
		margin: 0 auto;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rPx solid #ccc;
		padding: 20rpx 0;

		.name {
			font-size: 28rpx;
			color: #000;
		}

		.phone {
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	.right {
		image {
			width: 40rpx;
			height: 40rpx;
			padding-left: 15rpx;
			border-left: solid 1rpx #aaa;

		}
	}

	image {
		width: 40rpx;
		height: 40rpx;
	}

	.add {
		width: 70%;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: #354e44;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		margin: 800rpx auto;
	}
</style>
